<template>
  <div class="box">
    <div class="topSelects">
      <div class="message">按预约状态筛选</div>
      <el-checkbox-group v-model="checkList">
        <el-checkbox label="包含取消"></el-checkbox>
        <el-checkbox label="包含失约"></el-checkbox>
      </el-checkbox-group>
      <div class="messages">按预约类型筛选</div>
      <el-checkbox-group v-model="checkLists">
        <el-checkbox label="包含预约"></el-checkbox>
        <el-checkbox label="包含到店"></el-checkbox>
      </el-checkbox-group>
    </div>
    <div class="timestamps">
      <el-timeline>
        <el-timeline-item timestamp="2018/4/12 17:00:00" placement="top">
          <el-card>
            <div class="one">
              <div>预约</div>
              <div>到店</div>
              <div>【万达店】</div>
              <a>日志</a>
            </div>
            <div class="one">姓名:刘聚荣</div>
            <div class="two">医生:未指定医生</div>
            <div class="two">现场TC:常玉</div>
            <div class="two">项目:</div>
            <div class="two">备注:</div>
            <div class="two">刘艳林 创建于 2020-05-04 17:02:58</div>
          </el-card>
        </el-timeline-item>
        <el-timeline-item timestamp="2018/4/3 17:00:00" placement="top">
          <el-card>
            <h4>更新 Github 模板</h4>
            <p>王小虎 提交于 2018/4/3 20:46</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item timestamp="2018/4/2 17:00:00" placement="top">
          <el-card>
            <h4>更新 Github 模板</h4>
            <p>王小虎 提交于 2018/4/2 20:46</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item timestamp="2018/4/2 17:00:00" placement="top">
          <el-card>
            <h4>更新 Github 模板</h4>
            <p>王小虎 提交于 2018/4/2 20:46</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item timestamp="2018/4/2 17:00:00" placement="top">
          <el-card>
            <h4>更新 Github 模板</h4>
            <p>王小虎 提交于 2018/4/2 20:46</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MedicalRecord',
  data() {
    return {
      checkList: ['包含取消', '包含失约'],
      checkLists: ['包含预约', '包含到店'],
    }
  },
}
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  flex-direction: column;
  .topSelects {
    display: flex;
    flex-wrap: nowrap;
    margin-bottom: 20px;
    .message {
      margin-right: 20px;
    }
    .messages {
      margin: 0 20px;
    }
    .el-checkbox-group {
      display: flex;
      flex-wrap: nowrap;
      text-align: center;

      .left {
        margin-right: 140px;
      }
    }
  }
  .timestamps {
    display: flex;
    flex-direction: column;
    .el-card {
      width: 30%;
      height: 200px;
    }
    .one {
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
      margin-bottom: 12px;
    }
    .two {
      display: flex;
      flex-wrap: nowrap;
      margin-bottom: 8px;
    }
  }
}
</style>
